<template>
  <div>
    <TypeNav />
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag :trademark="searchParams.trademark"
                   :searchProps="searchParams.props" 
                   @deleteQueryTag="deleteQueryTag"
                   @deleteParamsTag="deleteParamsTag"
                   @deleteTrademark="deleteTrademark"
                   @deleteAttr="deleteAttr"/>
        <SearchSelector 
         @trademarkParams="trademarkParams"
         @attrvalueParams="attrvalueParams"/>
        <SearchDetails @searchListSort="searchListSort"
                      :pageNo="searchParams.pageNo"
                      @changePageNo="changePageNo"/>
        <SearchHot />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import SearchTag from "./components/SearchTag";
import SearchSelector from "./components/SearchSelector";
import SearchDetails from "./components/SearchDetails";
import SearchHot from "./components/SearchHot";
export default {
  name: "Search",
  components: {
    SearchTag,
    SearchSelector,
    SearchDetails,
    SearchHot,
  },
  data(){
    return {
      searchParams:{
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 100,
        props: [],
        trademark: "",
      }
    }
  },
  beforeMount(){
    this.initParams();
  },
  mounted(){
    this.getSearchList(this.searchParams);
  },
  methods:{
    ...mapActions("search",["getSearchList"]),

    initParams(){
       const {
        categoryName = "",
        category1Id = "",
        category2Id = "",
        category3Id = "",
      } = this.$route.query;
      const {searchKey=""}=this.$route.params;

      this.searchParams ={
        ...this.searchParams,
        categoryName,
        category1Id,
        category2Id,
        category3Id,
        keyword: searchKey,
      }
    },
    // 接受品牌传递过来的值 自定义事件回调函数
  trademarkParams(tm){
    this.searchParams.trademark = `${tm.tmId}:${tm.tmName}`
    this.getSearchList(this.searchParams);
  },
  attrvalueParams(attr){
    const {attrId, attrName,attrValue} = attr;
     const str = `${attrId}:${attrValue}:${attrName}`;
      if (this.searchParams.props.includes(str)) return;
    this.searchParams.props.push(`${attrId}:${attrValue}:${attrName}`);
    // 重新发请求
    this.getSearchList(this.searchParams);
  },
  // 删除querytag标记
  deleteQueryTag(){
    this.searchParams = {
      ...this.searchParams,
      category1Id: "",
      category2Id: "",
      category3Id: "",
      categoryName: "",
    };
    const params = this.$route.params;
    //重新发送请求
    this.getSearchList(this.searchParams);
    this.$router.push({
      name:"search",
      params,
    })
  },
  // 删除paramsTag标记
  deleteParamsTag(){
      this.searchParams = {
        ...this.searchParams,
        keyword: "",
    };
    const query= this.$route.query;
    this.$bus.$emit("notifyHeader")
    // 重新发送请求
      this.$router.push({
        name: "search",
        query,
    })
  },

  // 删除品牌
  deleteTrademark(){
    // 请求参数
    this.searchParams={
      ...this.searchParams,
      trademark:"",
    };
    // 重新发送请求
    this.getSearchList(this.searchParams);
  },
  // 删除属性的tag
  deleteAttr(tag){
    this.searchParams.props =this.searchParams.props.filter((item)=>tag !=item);
    // 重新发送请求
    this.getSearchList(this.searchParams);
  },

  // 排序 
  searchListSort(order){
    this.searchParams.order =order;
    // 重新发送请求
    this.getSearchList(this.searchParams);
  },
    // 点击页码翻页的 
  changePageNo(page){
    this.searchParams.pageNo=page;
    // 重新发送请求
    this.getSearchList(this.searchParams);
  }
  },

  
  watch:{
    $route(){
      this.initParams();
      this.getSearchList(this.searchParams);
    }
  }
  
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;
  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
